<template>
    <div class="maps">
        <el-row class="searchbox">
            <el-col :span="20">
                <el-input v-model="input" style="width: 350px; border-radius: 0px; border: none;" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="4">
                <el-button style="padding: 10px 20px; border-radius: 0px 4px 4px 0px; position: absolute;right: 0px;" type="primary"><i class="el-icon-search" style="font-size: 18px; font-weight: bold;"></i></el-button>
            </el-col>
        </el-row>
        <el-row class="siderbar">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row class="footernav">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <a href=""> <i class="el-icon-d-arrow-dot" style="background: red;"></i><span>1类</span></a>
                    <a href=""> <i class="el-icon-d-arrow-dot" style="background: #2ccc70;"></i><span>2类</span></a>
                    <a href=""> <i class="el-icon-d-arrow-dot" style="background: #fb9410;"></i><span>3类</span></a>
                    <a href=""> <i class="el-icon-d-arrow-dot" style="background: #e54d3d;"></i><span>4类</span></a>
                </div>
            </el-col>
        </el-row>
        <el-row class="footerbar">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <a href=""> <i class="el-icon-d-arrow-enter"></i><span>监测系统</span></a>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: "mapview"
    }
</script>

<style scoped>

    .maps {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-image: url("../assets/maps.png");
        position: relative;
    }

    .searchbox {
        width: 400px;
        position: absolute;
        left: 30px;
        top: 20px;
        box-shadow: 1px 2px 1px rgba(0,0,0,.06);
    }

    .siderbar {
        position: absolute;
        right: 20px;
        top: 90px;
        background: #fff;
        min-height: 500px;
        width: 400px;
        border-radius: 6px;
        box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
    }

    .footerbar {
        width: 100px;
        height: 40px;
        line-height: 40px;
        position: absolute;
        bottom: 30px;
        right: 20px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
        font-size: 14px;
    }

    .footerbar a {
        padding: 0px 10px;
        display: block;
        float: left;
        color: #4c4c4c;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        line-height: 40px;
    }

    .footernav {
        position: absolute;
        bottom: 30px;
        left: 30px;
        background: #fff;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
    }

    .footernav a {
        padding: 10px 10px;
        display: block;
        float: left;
        color: #4c4c4c;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
    }

    .el-icon-d-arrow-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #0278fd;
        margin: 0px 8px 0px 0px;
    }

    .el-icon-d-arrow-enter {
        width: 15px;
        height: 15px;
        background-image: url("../assets/loginico.png");
        background-position: -49px -57px;
        margin: 11px 6px 0px 0px;
        display: block;
        float: left;
    }
</style>